<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮和模糊搜索</title>
</head>

<body>
    <form action="http://www.baidu.com">
        <!-- id是每个标签的唯一标识 - js来获取的 -->
        <input type="text" name="" id="uname"><br>
        <!--提交按钮-->
        <input type="submit" value="提交表单">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">

        <!-- 普通按钮 - 配合js的事件
                 onclick - 点击事件 - 触发一个js函数
            -->
        <input type="button" value="普通按钮" onclick="test()"><br>

        <!--button标签 
                type:submit reset button
            -->
        <button>默认提交</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" onclick="test()">普通按钮</button><br>

        <!-- 图片按钮 - 具备提交功能 -->
        <input type="image" src="images/case4.png" alt="">

    </form>

    <script>
        // 定义一个函数
        function test() {
            //函数体
            alert("我是一个单击事件!");//弹出框

            //根据id来获取标签对象
            //js弱类型的
            //var unameInput = document.getElementById("uname");
            //对象访问属性
            //alert(unameInput.value);//获取文本框中的value - 输入的数据

            //学习js - 正则
            // for(var i = 0;i<10;i++){
            //     //控制台输出
            //     console.log(i);
            // }
        }
    </script>

    <!-- 模糊搜索 -->
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</body>

</html>